<template>
  <view class="backGround">
    <view class="tabBar">
      <view class="opt">
        <image style="width: 100%;height: 100%;"
               src="../../image/icopn.png"
               mode=""></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  methods: {

  }
}
</script>

<style>

*{
  box-sizing: border-box;
}
.backGround {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32rpx;
  background-image: url(https://w.wallhaven.cc/full/5d/wallhaven-5do179.jpg);
  min-height: 100vh;
}

.tabBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 64px;
  padding: 32rpx;
  position: fixed;
  bottom: 32rpx;
  /* backdrop-filter: blur(2px) saturate(180%); */
  border: 0.0625rem solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2), inset 0 4px 20px rgba(255, 255, 255, 0.3);
  width:90%;

}

.fixed::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 64px;
  backdrop-filter: blur(1px);
  box-shadow: inset -10px -8px 0px -11px rgba(255, 255, 255, 1), inset 0px -9px 0px -8px rgba(255, 255, 255, 1);
  opacity: 0.6;
  z-index: -1;
  filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(115%);
  pointer-events: none;
}

.opt {
  border-radius: 100%;
  height: 64rpx;
  width: 64rpx;

}
</style>
